<template>
 <div id="register-main">

   <el-card class="box-card">
        <div class="card-header">
           <span style="font-weight: bolder;color: #2155c2;position: center" >注册新账号</span>
         </div>

       <el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px"  style="width: 300px">
         <el-form-item label="用户名" prop="oldP">
           <el-input type="username"  v-model="resetForm.username" auto-complete="off"></el-input>
         </el-form-item>
         <el-form-item label="新密码" prop="newP">
           <el-input type="password" show-password v-model="resetForm.newP" auto-complete="off"></el-input>
         </el-form-item>
         <el-form-item label="确认密码" prop="newPP">
           <el-input type="password" show-password v-model="resetForm.newPP" auto-complete="off"></el-input>
         </el-form-item>
         <el-form-item label="电话号" prop="newPhone">
           <el-input type="phone"  v-model="resetForm.newPhone" auto-complete="off"></el-input>
         </el-form-item>
         <el-form-item label="密保问题" prop="newQuestion">
           <el-input type="question"  v-model="resetForm.newQuestion" auto-complete="off"></el-input>
         </el-form-item>
         <el-form-item label="答案" prop="newAnswer">
           <el-input type="answer"  v-model="resetForm.newAnswer" auto-complete="off"></el-input>
         </el-form-item>

         <div class="btn-sub">
           <el-button type="primary" @click="subup()" class="button">注册</el-button>
           <el-button type="primary" @click="backlogin()" class="button2">返回</el-button>
         </div>


       </el-form>


   </el-card>


  </div>
</template>

<script>
import {ElMessage} from "element-plus";
export default {
  name: "index",
  data() {
    var validateoldPass = (rule, value, callback) => {
      if (!value) {
         callback(new Error('请输入电话'));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入新密码'));
      } else if (value.toString().length < 6 || value.toString().length > 18) {
        callback(new Error('密码长度为6 - 18个字符'))
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.resetForm.newP) {
        callback(new Error('两次输入密码不一致!'));
      } else {
         callback();
      }
    };
    return {
      resetForm: {
        username: '',
        oldP: '',
        newP: '',
        newPP: '',
        userid: '156854656',
        newPhone: '',
        newQuestion: '',
        newAnswer: '',
      },
      resetFormRules: {
        username: [{required: true, validator: validateoldPass, trigger: 'blur'}],
        newP: [{required: true, validator: validatePass, trigger: 'blur'}],
        newPP: [{required: true, validator: validatePass2, trigger: 'blur'}],
        phone: [{required: true, trigger: 'blur'}],
        question: [{required: true, trigger: 'blur'}],
        answer: [{required: true, trigger: 'blur'}],
      },

    }
  },
  methods: {
    subup() {
      //提交注册
      this.$http.post("user/register", this.resetForm).then(res => {
        if (res.statusCode == '200') {
          ElMessage({
            message: '注册成功！请重新登录！',
            type: 'success',
          })
          this.$router.push("/login")
        } else {
          ElMessage.error('注册失败！')
        }
      }).catch(() => {
        ElMessage.error('注册失败！')
      })
    },
      backlogin(){
        this.$router.push("/login")
      }
  }
}


</script>

<style scoped>
#register-main{
 background: white;
  margin-left: 0%;
  width: 100%;
  height: 100%;
}
.position-updatepwd{
  position: center;
  top: 150px;
  left: 550px;
  background: white;
  margin-top: 10%;
}
.btn-sub{
  margin-top: 7%;
  width: 450px;
  margin-left: 0px;
}
.box-card{
  margin-left: 0px;
  height: 100%;
}
.button{
  width: 100px;
  position: center;
}
.button2{
  width: 100px;
  position: center;
  margin-left: 25px;
}
</style>
